<template>
	<view class="cu-bar foot bg-white">
		<view class="flex justify-around">
			<view 
				v-for="(item,index) in tabArr" 
				:class="['text-center tab-item',{active:tabIdx==index}]"
				@click="handleTab(index)"
			>
				<text :class="['iconfont',item.icon]"></text>
				<view class="">
					{{item.title}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			active: {
				type: Number,
				default:0 
			},
		},
		data() {
			return {
				tabArr: [
					{title:'首页',icon:'icon-dangao-shi',path:'home'},
					{title:'分类',icon:'icon-fenlei',path:'cake'},
					{title:'购物车',icon:'icon-youhuijuan',path:'cart'},
					{title:'我的',icon:'icon-vip-fill',path:'mine'},
				],
				tabIdx:0
			}
		},
		created() {
			this.tabIdx = this.active
		},
		methods: {
			handleTab(idx) {
				this.tabIdx=idx
				let {path} = this.tabArr[this.tabIdx]
				uni.redirectTo({
					url:`/pages/${path}/${path}`
				})
			}
		},
	}
</script>

<style lang="scss" scoped>
.foot{
	width: 100%;
	.flex{
		width:100%;
	}
	.tab-item{
		color:#999;
		&.active{
			color: #444;
			border-bottom: 4upx solid orange;
		}
	}
}
</style>